import React from 'react'
import { View, Image } from '@tarojs/components'
import styles from './index.module.scss'

import arrowRight from '@/static/arrow-right.svg'
import imgTodoCompleted from '@/static/fake/todo-completed-img.png'
import imgTodo from '@/static/fake/todo-img.png'

interface TodoItemProps {
    title: string // 标题
    duration: string // 时长
    flexibility: string // 周期
    completed?: boolean // 是否完成
    onClick?: () => void
}
const TodoItem: React.FC<TodoItemProps> = ({
    title,
    duration,
    flexibility,
    completed = false,
    onClick = () => {},
}) => {
    return (
        <View
            onClick={onClick}
            className={
                completed
                    ? styles.completed + ' ' + styles.todoItem
                    : styles.todoItem
            }
        >
            <View className={styles.todoItemImage}>
                <Image src={completed ? imgTodoCompleted : imgTodo} />
            </View>
            <View className={styles.todoItemContent}>
                <View className={styles.todoItemTitle}>{title}</View>
                <View className={styles.todoItemInfo}>
                    <View className={styles.todoItemDuration}>{duration}</View>
                    <View className={styles.todoItemflexibility}>
                        {flexibility}
                    </View>
                </View>
            </View>
            <View className={styles.todoItemIndicator}>
                <Image src={arrowRight} />
            </View>
        </View>
    )
}
export default TodoItem
